<?php 
$priceArray = array(
				'delhi'=>345.76, 
				'Lucknow'=>65.63,
				'Mumbai'=>675.63,
				'Goa'=> 98.02);

	foreach($priceArray as $loc=>$price) 
	{
?>
<div class="vacation" data-qty="<?=$loc?>" data-price='<?=$price?>'>
	<h3><?=$loc?> Vacation</h3>
	<p><?=$price?> per ticket</p>
	<p>
		Tickets:
		<input type='number'class='quantity'value='1'/>
	</p>
</div>
<?php 
	}//end foreach
?>
<!----    End       --->

<p style="font-size:25px;">Total Price: $<span id='total'>00.00</span></p>

	<p class="pra">Call Us At 1-555-jquery-air to make a reservation today!!</p>&nbsp
	&nbsp;

<script src="lib.js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){		
		
		calculate();
		
		$('.vacation').on('change', '.quantity', function() {
			calculate();
		});
		
		function calculate()
		{
			var grossPrice=0;			
			$('.vacation').each(function(){
				var price = parseFloat($(this).data('price'));
				var qty = $(this).find('.quantity').val();
				grossPrice += price * qty;				
			})					
			grossPrice = grossPrice.toFixed(2);
			$('#total').text(grossPrice);
		}
   });
	

</script>

<style>
	body{
		  background-color: cadetblue;
          padding: 20px;   
	}    	    
 </style>
